$(document).ready(function() {
    $(".container ul").on("click", "li", clickHandller)
    $(".container >ul >li >ul").on("click", "li", clickHandller)
})

let html;
let titleid;
let count = 0;
$.ajax({
    url: "http://chst.vip:1234/api/getcategorytitle"
}).then(res => {
    creatLi(res.result);
})


function creatLi(data) {
    html = "";
    data.forEach(item => {
        // console.log(item);
        html += `
                <li titleid="${item.titleId}">
                    <span>${item.title}</span>
                    <i>▼</i>
                    <ul></ul>
                </li>
                `;
    });
    $(".container ul").html(html);
}

function creatLiData(data, oldTitleid) {
    html = "";
    titleid = Number(data[0].titleId);
    data.forEach(item => {
        // console.log(item);
        html += `
                <li categoryId="${item.categoryId}">
                    ${item.category}
                </li>
                `;
    });
    if (titleid != oldTitleid) {
        $(".container >ul >li:eq(" + titleid + ") >ul").html(html);
        $(".container >ul >li:eq(" + titleid + ") >ul >li").animate({
            height: "0.99rem",
        }, 500)
    } else {
        count++;
        if (count >= 1) {
            titleid = null;
        }
    }

}

function clickHandller(e) {
    e.stopPropagation();
    e.preventDefault();
    // console.log("object");
    if ($(this).attr("categoryId")) {
        // console.log();
        location.href = "./productlist.html?pageid=1&categoryid=" + $(this).attr("categoryId") +"&categoryname=" +$(this).text().trim();
    }
    
    $(".container >ul >li:eq(" + titleid + ") >ul >li").animate({
        height: 0,
    }, 500).css({
        "border": "none"
    })
    let id = $(this).attr("titleid");
    $.ajax({
        url: "http://chst.vip:1234/api/getcategory?titleid=" + id
    }).then(res => {
        creatLiData(res.result, titleid);
    })
}